.ss-search {
  width: 700px;

  @include mobile {
    width: 100%;
  }

  margin: 0 auto;

  .input-wrapper {
    margin: 24px auto;
    height: 56px;
    border: 1px solid $button-border-color-selected;
    display: flex;

    @include mobile {
      height: 46px;
      font-size: 16px;
    }
  }

  $input-background-color: rgba(#fff, .3);

  .search-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
    font-size: 25px;
    color: $button-border-color-selected;
    background-color: $input-background-color;

    @include mobile {
      width: 42px;
      font-size: 20px;
    }
  }

  .input {
    flex-grow: 1;
    height: 100%;
    border: 0;
    outline: 0;
    font-size: 16px;
    background-color: $input-background-color;
  }

  .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 100%;
    color: #fff;
    background-color: $button-border-color-selected;
    cursor: pointer;
    font-size: 16px;

    @include mobile {
      width: 80px;
    }
  }

  .search-type {
    display: flex;
    flex-wrap: wrap;
    margin: 40px 0;

    .item {
      padding: 8px 20px;
      margin-right: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: $text-color-secondary;
      cursor: pointer;

      &:last-child {
        margin-right: 0;
      }

      &:hover,
      &.-selected {
        color: $button-border-color-selected;
      }
    }

    input {
      display: none;
    }
  }

  .search-container {
    display: flex;
    flex-direction: column;

    .not-found {
      margin-top: 40px;
      text-align: center;
      font-size: 16px;
      color: $text-color-secondary;
    }

    .ss-summary {
      flex-direction: column;

      .title {
        max-width: 100%;
      }

      a {
        text-overflow: ellipsis;
      }
    }
  }
}

// algoliasearch 高亮
.ais-Highlight {
  color: #006ad9;
}